<template>
  <div class="hello">
      <el-input v-model="student.name" ></el-input>
<el-button @click="deleteStudent(student.length)" type="danger" icon="el-icon-delete" circle></el-button>
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      required: true
    },
    items: {
      type: Array,
      default: Array
    }
   
  },
  data () {
    return {
      student: {
        name: '',
      },
      datak:{},
      k:0,
      log:1
    }
  },
  watch: {
    student: {
      handler (newV, oldV) {
         if(oldV.name=="undefined")
        {
          this.items[0].name="";
        }

        console.log(newV.name);
        this.items[0].name+=","+newV.name;
        this.items[1].name=this.log;
        console.log(this.items);
        if (newV.name.length === 0) {
          return false
        }

        if (newV.age.length === 0) {
          return false
        }
      
      },
      deep: true
    },
    items: {
      handler (newV, oldV) {
        
        this.log++;
        console.log(this.log);

      },
      deep: true
    }
  },
  methods: {
    deleteStudent: function (s) {
      this.$emit('deleteIndex', this.index)
      this.log=this.log-2;
    },
    sk()
    {
        console.log("fweaf");
            /* return this.student; */
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>